<template>
    <a-modal v-model:open="open" title="新增用户" :confirm-loading="confirmLoading" @ok="handleOk">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">

            <a-alert v-if="success == true" message="Success" description="用户添加成功" type="success" show-icon closable
                @close="onClose" />
            <a-alert v-if="error == true" message="Error" description="该学号已存在" type="error" show-icon closable
                @close="onClose" />

            <a-form-item label="用户名" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
                <a-input v-model:value="formState.username" />
            </a-form-item>

            <a-form-item label="密码" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
                <a-input-password v-model:value="formState.password" />
            </a-form-item>

            <a-form-item label="学号" name="code" :rules="[{ required: true, message: 'Please input your code!' }]">
                <a-input v-model:value="formState.code" />
            </a-form-item>

            <a-form-item label="邮箱" name="email" :rules="[{ required: true, message: 'Please input your email!' }]">
                <a-input v-model:value="formState.email" />
            </a-form-item>

            <a-form-item label="头像" name="avatar" :rules="[{ required: true, message: 'Please input your avatar!' }]">
                <a-input v-model:value="formState.avatar" />
            </a-form-item>

            <!-- <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                                    <a-button style="margin-left: 10px" type="primary" @click="resetForm">重置</a-button>
                                    <a-button type="primary" @click="onSubmit">提交</a-button>
                                </a-form-item> -->

        </a-form>
    </a-modal>
</template>

<!-- 提交新用户页表 -->
<script setup>
import { axios } from '@/axios';
import { ref, reactive, watchEffect, inject } from 'vue';
//console.log('add-user')
//const formRef = ref();

//const modalText = ref('Content of the modal');
//const open = ref(false);
let open = ref(false);
const confirmLoading = ref(false);

const formState = reactive({
    id: '',
    username: '',
    password: '',
    code: '',
    email: '',
    avatar: '',
    //remember: true,
});

const update = inject('Call_Get_list')

const handleOk = async e => {
    // 异步
    // confirmLoading.value = true;
    // setTimeout(() => {
    //     open.value = false;
    //     confirmLoading.value = false;
    // }, 2000);
    // console.log(e);
    let record = {
        userName: formState.username,
        password: formState.password,
        code: formState.code,
        email: formState.email,
        avatar: formState.avatar
    }
    //console.log("handleOk");
    // open.value = false;
    let msg = await axios.post("/api/user/AddUser", record);//异步
    console.log(msg)
    debugger
    if (msg.success == false) {
        console.log("false")
        success.value = false
        error.value = true
    }
    else {
        success.value = true
        error.value = false
        //open.value = false;
        setTimeout(() => {
            open.value = false;
            confirmLoading.value = false;
        }, 2000);
        update();
    }
};

let success = ref(false)
let error = ref(false)

// const onSubmit = () => {
//     let record = {
//         //id: formState.id,
//         userName: formState.username,
//         password: formState.password,
//         code: formState.code,
//         email: formState.email,
//         avatar: formState.avatar
//     }
//     //console.log(JSON.stringify(record));
//     let msg = axios.post("/api/user/AddUser", record);
//     if (msg.success = true) {
//         success = true;
//     }
//     else success = false;
//     location.reload();
// };
// 
//const editOpen = ref(false);
// const saveUser = (record) => {
//     console.log(record.id);
//     formState.id = record.id;
//     //
//     editOpen.value = true;
//     //
//     //this.$forceupdate();

// };

// const onSubmitSave = () => {
//     let record = {
//         id: formState.id,
//         userName: formState.username,
//         password: formState.password,
//         code: formState.code,
//         email: formState.email,
//         avatar: formState.avatar
//     }
//     console.log(JSON.stringify(record));
//     let msg = axios.post("/api/user/SaveUser", record);
//     if (msg.success = true) {
//         success = true;
//     }
//     else success = false;
//     //loadPage();
// };

// const resetForm = () => {
//     formRef.value.resetFields();
// };

const onClose = e => {
    console.log(e, 'I was closed.');
};

const onFinish = values => {
    console.log('Success:', values);
};

const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};


//update()

// 父组件通过 props 向下传递数据给子组件；
// emit 用来触发父组件里面绑定的函数并可以传参回父组件

//
const props = defineProps({
    open: true,
});

// let open = ref(false);
// 
watchEffect(async () => {
    open.value = props.open
    //console.log(open);
});
// console.log(open);
// 定义 调用
const emits = defineEmits(['update:open']) // 提交
emits("update:open", open);

</script>

<style lang="less">
@import "@/assets/word-like.less";
@import "@/assets/paper.less";

#user-manager {
    width: 1000px;
    margin: 60px auto;

    .page-div {
        padding: 60px 10px;
    }

    .sample {
        background: #fff;
        padding: 10px;

        .data-table {
            margin-bottom: 10px;

            td {
                border: none;
            }
        }
    }
}
</style>

